<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div style="width:100% ;height:50% ;margin: 0 auto">
    <div id="dishCharts" style="width: 600px;height:400px; float: left"></div>
    <div id="mealCharts" style="width: 600px;height:400px; float: right"></div>
</div>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../js/echarts.min.js"></script>
<!--<script href="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.common.js"></script>-->
<script>
    var dishCharts = echarts.init(document.getElementById('dishCharts'));
    var mealCharts = echarts.init(document.getElementById('mealCharts'));



















    dishChartsOption = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                }
            ]

    };
    mealChartsOption = {
        legend: {
            orient: 'vertical',
            x: 'left',
            data: ['A', 'B', 'C', 'D', 'E']
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                data: [
                    { value: 335, name: 'A' },
                    { value: 310, name: 'B' },
                    { value: 234, name: 'C' },
                    { value: 135, name: 'D' },
                    { value: 1548, name: 'E' }
                ]
            }
        ]
    };
    dishCharts.setOptions(dishChartsOption);
    dishCharts.setOptions(mealChartsOption)
</script>

</body>
</html>